顺序加载图片方法

普通图片加载

//普通图片加载
var imglist = ['https://avatars3.githubusercontent.com/u/34082804?s=460&v=4','./img/2.jpg','https://avatars3.githubusercontent.com/u/34082804?s=460&v=4','https://github.githubassets.com/images/search-key-slash.svg','./img/2.jpg','https://avatars3.githubusercontent.com/u/34082804?s=460&v=4'];
loadImg(imglist);

function loadImg(imglist){
    var imgarr = [];
    var curimg = 0;
    var body = document.getElementsByTagName('body');

    for(var i =0;i<imglist.length;i++){
        
        var img = new Image();
        img.src = imglist[i];
        img.style.width = '200px';
        img.id = i;
        img.onload = function(){
            console.log('show    '+this.id)
        }
        imgarr.push(img);
        body[0].appendChild(img);
    }
}

顺序加载图片方法1

//顺序加载图片方法1、
function loadImg(imglist){
    var imgarr = [];
    var curimg = 0;
    var body = document.getElementsByTagName('body');

    for(var i =0;i<imglist.length;i++){
        
        var img = new Image();
        img.src = imglist[i];
        img.style.width = '200px';
        img.onload = function(){
            curimg +=1;
            if(curimg < imgarr.length){
                body[0].appendChild(imgarr[curimg]);
                console.log('show    '+curimg)
            }
            
        }
        imgarr.push(img);
    }
    body[0].appendChild(imgarr[0]);
}

promise方法

//promise方法

var imglist = ['https://avatars3.githubusercontent.com/u/34082804?s=460&v=4','./img/2.jpg','https://avatars3.githubusercontent.com/u/34082804?s=460&v=4','https://github.githubassets.com/images/search-key-slash.svg','./img/2.jpg','https://avatars3.githubusercontent.com/u/34082804?s=460&v=4'];

var body = document.getElementsByTagName('body');

function loadimg(i){
    var img = new Image();
    img.src = imglist[i];
    img.style.width = '200px';
    img.id = i;
    body[0].appendChild(img);
    return new Promise(function(resolve,reject){
                img.onload = function(){
                    console.log('show    '+this.id)
                    resolve(i+1)
                };
            })
}

var a = Promise.resolve(0);

var i=0;
while(i<imglist.length-1){
    a = a.then(function(i){
    console.log('load    '+i)
        return loadimg(i)
    });
    i++;
}

async 方法

//async 方法
async function loadImages(imglist){
    for(var i =0; i<imglist.length; i++){
        console.log('load    '+i)
        await loadImg(i); //执行完成之后才走下一步；
        console.log('finish   '+i);
    }
}

async function loadImg(i){
    var img = new Image();
    img.src = imglist[i];
    img.style.width = '200px';
    img.id = i;
    body[0].appendChild(img);
    return new Promise(function(resolve,reject){
        img.onload = function(){
            console.log('show    '+this.id)
            resolve(i+1);
        }
    })
}